<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>文章分类</span>
        <el-button type="primary" size="mini" @click="dialogVisible = true"
          >添加分类</el-button
        >
      </div>
      <el-dialog
        @closed="$refs.ruleForm.resetFields()"
        title="添加文章分类"
        :visible.sync="dialogVisible"
        width="35%"
      >
        <!-- closed关闭动画后才触发这个事件。close关闭时触发事件， :before-close="handleClose"关闭前事件要传一个函数 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="75px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="cate_name">
            <el-input v-model="ruleForm.cate_name"></el-input>
          </el-form-item>
          <el-form-item label="分类别名" prop="cate_alias">
            <el-input v-model="ruleForm.cate_alias"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button size="mini" type="primary" @click="submitForm('ruleForm')"
            >添 加</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        @closed="$refs.editFrom.resetFields()"
        title="修改文章分类"
        :visible.sync="editVisible"
        width="35%"
      >
        <el-form
          :model="editFrom"
          :rules="rules"
          ref="editFrom"
          label-width="75px"
          class="demo-editFrom"
        >
          <el-form-item label="分类名称" prop="cate_name">
            <el-input v-model="editFrom.cate_name"></el-input>
          </el-form-item>
          <el-form-item label="分类别名" prop="cate_alias">
            <el-input v-model="editFrom.cate_alias"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="editVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="editArticle('editFrom')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-table stripe :data="cateList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="90"></el-table-column>
        <el-table-column prop="cate_name" label="分类名称"> </el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template v-slot="scope">
            <el-button
              type="primary"
              size="small"
              @click="editHandler(scope.row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ArtCate',
  data () {
    return {
      cateList: [],
      dialogVisible: false,
      editVisible: false,
      editFrom: {},
      ruleForm: {
        cate_alias: '',
        cate_name: ''
      },
      rules: {
        cate_name: [
          { required: true, message: '请输入分类名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-1\u4e00-\u9fa5]{1,10}$/,
            message: '请输入1-10位中英文或数字',
            trigger: 'blur'
          }
        ],
        cate_alias: [
          { required: true, message: '请输入分类名', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-1]{1,15}$/,
            message: '请输入1-15位字母或数字',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.getArtCate()
  },
  methods: {
    async getArtCate () {
      const { data: res } = await this.$http.get('/my/cate/list')
      if (res.code === 0) {
        this.cateList = res.data
      }
    },
    editHandler (row) {
      // 收到作用域插槽数据并将其浅拷贝到表格中、防止表格同步修改
      this.editFrom = { ...row }
      if (row.id === 1 || row.id === 2) {
        return this.$message.error('管理员不准用户更改此条信息')
      }
      this.editVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    editArticle (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.put(
            '/my/cate/info',
            this.editFrom
          )
          if (res.code === 0) {
            this.$message({ type: 'success', message: res.message })
            this.editVisible = false
            return this.getArtCate()
          }
          this.$message({ type: 'error', message: res.message })
        } else {
          console.log('提交失败')
          return false
        }
      })
    },
    async deleteHandler (id) {
      if (id === 1 || id === 2) {
        return this.$message.error('管理员不准用户更改此条信息')
      }
      const result = await this.$confirm('确认删除吗？', '警告').catch(
        (e) => e
      )
      if (result === 'confirm') {
        const { data: res } = await this.$http.delete('/my/cate/del', {
          params: { id }
        })
        if (res.code === 0) return this.getArtCate()
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post(
            '/my/cate/add',
            this.ruleForm
          )
          if (res.code === 0) {
            this.$message({ type: 'success', message: res.message })
            this.dialogVisible = false
            return this.getArtCate()
          }
          this.$message({ type: 'error', message: res.message })
        } else {
          console.log('提交失败')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
